<template>
    <container
        :designer="designer"
        :field="field"
        :form-model="formModel"
    >
        <el-row 
            :key="field.id" 
            :gutter="field.options.gutter" 
            class="grid-container"
            :class="[selected ? 'selected' : '']"
            @click.stop="selectWidget(field)"
        >
            <template v-for="(colWidget, colIdx) in field.cols" :key="colWidget.id">
                <XyGridCol 
                    :field="colWidget" 
                    :designer="designer"
                    :form-model="formModel"
                >
                </XyGridCol>
            </template>
        </el-row>
    </container>
</template>

<script setup>
import XyGridCol from './grid-col.vue'
import container from './container.vue';
import { computed } from 'vue';

defineOptions({
    name:"xy-grid"
})

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    },
    formConfig:{
        type:Object,
        default:()=>({})
    }
})

const selected = computed(()=>{
    if(!props.designer) return false
    if(props.designer.selectId === props.field.id){
        return true
    }
    return false
})
const selectWidget = (widget)=>{
    if(!!props.designer){
        props.designer.setSelected(widget)
    }  
}

</script>

<style lang='scss' scoped>
  .el-row.grid-container {
    padding: 3px;
    min-height: 50px;
    //line-height: 48px;
    //padding: 6px;
    outline: 1px dashed #336699;

    .form-widget-list {
      min-height: 28px;
    }

  }

  .grid-container.selected, .grid-cell.selected {
    outline: 2px solid #95fdb7 !important;
  }
</style>